<template>
    <div class="root">
        <!-- 一个ul是一行 -->
        <ul>
            <li>
                <div class="book-name">书名：</div>
                <div class="book-text">{{ bookInfoData.bookName }}</div>
            </li>
            <li>
                <div class="book-name">作者：</div>
                <div class="book-text">{{ bookInfoData.bookAuthor }}</div>
            </li>
        </ul>
        <ul>
            <li>
                <div class="book-name">出版社：</div>
                <div class="book-text">{{ bookInfoData.bookPress }}</div>
            </li>
            <li>
                <div class="book-name">书籍页数：</div>
                <div class="book-text">{{ bookInfoData.bookPagination }}</div>
            </li>
        </ul>
        <ul>
            <li>
                <div class="book-name">书籍标准ISBN：</div>
                <div class="book-text">{{ bookInfoData.bookIsbn }}</div>
            </li>
            <li>
                <div class="book-name">价格：￥</div>
                <div class="book-text">{{ bookInfoData.bookPrice }}</div>
            </li>
        </ul>
        <ul>
            <li>
                <div class="book-name">书籍状态：</div>
                <div class="book-text">{{ bookInfoData.bookStatus == 0 ? "可借阅" : "已借阅" }}</div>
            </li>
            <li>
                <div class="book-name">上架时间：</div>
                <div class="book-text">{{ bookInfoData.bookUploadTime.substring(0, 10) }}</div>
            </li>
        </ul>
        <!-- <ul>
            <li>
                <div class="book-name">当前借阅人：</div>
                <div class="book-text">{{ bookInfoData.bookBorrower }}</div>
            </li>
            <li></li>
        </ul>
        <ul>
            <li>
                <div class="book-name">最晚还书时间：</div>
                <div class="book-text">{{ bookInfoData.bookReturnTime.substring(0, 10) }}</div>
            </li>
            <li>
                <div class="book-name">借书时间：</div>
                <div class="book-text">{{ bookInfoData.bookBorrowTime.substring(0, 10) }}</div>
            </li>
        </ul> -->
    </div>
</template>

<script>
export default {
    props: ['bookInfoData'],
    data () {
        return {
        }
    }
}
</script>

<style scoped>
    ul {
        display: flex;
        justify-content: center;
        margin: 0;
    }

    li {
        display: flex;
        width: 50%;
    }

    li>div {
        display: flex;
        /* justify-content: center;    水平居中 */
        align-items: center;        /* 垂直居中 */
    }

    .book-name {
        height: 50px;
        font-size: 16px;
        font-weight: bold;
    }

    .book-text {
        height: 50px;
        font-size: 16px;
    }
</style>